<template>
  <div id="app">
    <div id="header">
      <div id="nav" class="header" clearfix>
        <ul class="header-left">
          <li>
            <router-link tag="li" to="/"><a>系统首页</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/courselist"><a class="active">基础课程</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/codinglist"><a>实战案例</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/wendalist"><a>问答社区</a></router-link>
          </li>
          <li>
            <router-link tag="li" to="/articlelist"><a>手记</a></router-link>
          </li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div class="wrap">
        <div class="top">
          <div class="course-top clearfix">
            <a class="top-header" href="#">
              <img src="../../../static/img/course/logo-course.png" alt="免费课程" width="140" height="60">
            </a>
            <div class="adver-con" style="display: inline-block;margin-left: 16px;">
              <img src="../../../static/img/course/course-top.png" style="height:60px;width: 96px;">
            </div>
            <div class="course-top-search">
              <div class="search-area" data-search="top-banner">
                <input class="search-input" placeholder="搜索感兴趣的内容" type="text" autocomplete="off">
              </div>
              <div class="showhide-search"><i class="el-icon-search"></i></div>
            </div>
          </div>
          <div class="course-content">
            <div class="course-nav-box">
              <div class="course-nav-row clearfix">
                <span class="hd l">方向：</span>
                <div class="bd">
                  <ul class="">
                    <li class="course-nav-item ">
                      <router-link to="/courselist"><a>全部</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/nt"><a class="active">前沿技术</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/fe"><a class="active">前端开发</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/be"><a class="active">后端开发</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/mobile"><a class="active">移动开发</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/math"><a class="active">算法&amp;数学</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/cb"><a class="active">云计算&amp;大数据</a></router-link>
                    </li>
                    <li class="course-nav-item ">
                      <router-link to="/courselist/op"><a class="active">运维&amp;测试</a></router-link>
                    </li>
                    <li class="course-nav-item on">
                      <router-link to="/courselist/data"><a>数据库</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="/courselist/ui"><a class="active">UI设计&amp;多媒体</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="/courselist/game"><a class="active">游戏</a></router-link>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="course-nav-row course-nav-skills clearfix">
                <div class="js-course-skills course-skills-box">
                  <span class="hd l">分类：</span>
                  <div class="bd">
                    <ul class="">
                      <li class="course-nav-item on">
                        <router-link to="/courselist/data"><a>全部</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/mysql"><a class="active">MySQL</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/redis"><a class="active">Redis</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/mongodb"><a class="active">MongoDB</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/oracle"><a class="active">Oracle</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/sqlserver"><a class="active">SQL Server</a></router-link>
                      </li>
                      <li class="course-nav-item">
                        <router-link to="/courselist/nosql"><a class="active">Nosql</a></router-link>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="course-nav-row clearfix border_bottom_none">
                <span class="hd l">难度：</span>
                <div class="bd">
                  <ul class="">
                    <li class="course-nav-item on">
                      <router-link to="#"><a class="active">全部</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="#"><a class="active">入门</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="#"><a class="active">初级</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="#"><a class="active">中级</a></router-link>
                    </li>
                    <li class="course-nav-item">
                      <router-link to="#"><a class="active">高级</a></router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="course-tool-bar clearfix">
          <div class="tool-left l">
            <a href="#" class="moco-change-smalle-btn active">最新</a>
            <a href="#" class="moco-change-smalle-btn">最热</a>
          </div>
          <div class="tool-right r">
            <span class="tool-item tool-pager">
              <span class="pager-num">
                <b class="pager-cur">1</b>/<em class="pager-total">2</em>
              </span>
              <a href="javascript:void(0)" class="pager-action pager-prev  disabled"><i class="el-icon-arrow-left"></i></a>
              <a href="#" class="pager-action pager-next"><i class="el-icon-arrow-right"></i></a>
            </span>
          </div>
        </div>
        <div class="course-list">
          <div class="moco-course-list">
            <div class="clearfix">
                <div class="course-card-container">
	                <a target="_blank" href="/learn/1089" class="course-card">		
		                <div class="course-card-top">
			                <img class="course-banner lazy" data-original="//img.mukewang.com/5c176d7800018a3106000338-240-135.jpg" src="//img.mukewang.com/5c176d7800018a3106000338-240-135.jpg" style="display: inline;">
						    <div class="course-label">
								<label>Redis</label>
							</div>
					    </div>
                        <div class="course-card-content">
                            <h3 class="course-card-name">Redis5.0之12项新特性</h3>
                            <div class="clearfix course-card-bottom">
                                <div class="course-card-info">
                                    <span>初级</span><span><i class="el-icon-view"></i>1335</span>
                                </div>
                                <p class="course-card-desc">解剖 Redis5.0 的12项新特性。</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
          </div>
          <div class="page">
            <span class="disabled_page">首页</span>
            <span class="disabled_page">上一页</span>
            <a href="javascript:void(0)" class="active text-page-tag">1</a>
            <a class="text-page-tag" href="/course/list?page=2">2</a>
            <a class="text-page-tag" href="/course/list?page=3">3</a>
            <a class="text-page-tag" href="/course/list?page=4">4</a>
            <a class="text-page-tag" href="/course/list?page=5">5</a>
            <a class="text-page-tag" href="/course/list?page=6">6</a>
            <a class="text-page-tag" href="/course/list?page=7">7</a>
            <a href="/course/list?page=2">下一页</a>
            <a href="/course/list?page=32">尾页</a>
          </div>
        </div>
      </div>
    </div>
    <div id="footer" data="course,list">
      <div class="waper">
        <div class="footerwaper clearfix">
          <div class="followus r">
            <a class="followus-weixin" href="javascript:;" target="_blank" title="微信">
              <div class="flw-weixin-box"></div>
            </a>
            <a class="followus-weibo" href="http://weibo.com/u/3306361973" target="_blank" title="新浪微博"></a>
            <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
          </div>
          <div class="footer_intro l">
            <div class="footer_link">
              <ul>
                <li><a href="//www.imooc.com/" target="_blank">网站首页</a></li>
                <li><a href="/about/cooperate" target="_blank" title="企业合作">企业合作</a></li>
                <li><a href="/about/job" target="_blank">人才招聘</a></li>
                <li> <a href="/about/contact" target="_blank">联系我们</a></li>
                <li> <a href="/about/recruit" target="_blank">讲师招募</a></li>
                <li> <a href="/about/faq" target="_blank">常见问题</a></li>
                <li> <a href="/user/feedback" target="_blank">意见反馈</a></li>
                <li><a href="http://daxue.imooc.com/" target="_blank">慕课大学</a></li>
                <li> <a href="/about/friendly" target="_blank">友情链接</a></li>
              </ul>
            </div>
            <p>Copyright © 2018 imooc.com All Rights Reserved | 京ICP备 12003892号-11 </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  #nav {
    padding: 0 15px;
  }
  ol, ul {
    list-style: none;
  }
  address, caption, cite, code, dfn, em, strong, th, var, optgroup {
    font-style: normal;
    font-weight: 400;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400;
  }
  :link, :visited, ins {
    text-decoration: none;
  }
  a:active, a:hover {
    color: #ec1500;
  }
  a, button, input {
      outline: 0;
  }
  fieldset, img {
    border: 0;
  }
  .search-area {
    width: 140px !important;
  }
  .l {
    float: left;
  }
  .r {
    float: right;
  }
  #header{
    background: #07111b;
    color: #fff;
    .header{
      width: 1200px;
      height: 40px;
      margin: 0 auto;
      font-size: 12px;
      .header-left{
        li{
          float: left;
          margin-right: 12px;
          transition: .3s;
          margin: 0;
          a{
            display: block;
            height: 40px;
            line-height: 40px;
            color: rgba(255,255,255,.6);
            text-decoration: none;
            padding: 0 15px !important;
            position: relative;
          }
          .active {
              color: #fff;
            }
          a:hover{
            color: #fff;
            background: rgba(255,255,255,.1);
          }
        } 
      }
    } 
  }
  #main {
    background: #f3f5f7;
    padding-top: 0;
    min-height: 750px;
    padding: 20px 0;
  }
  .wrap {
    width: 100%;
    margin-top: -19px;
    background-color: #fff;
    padding-bottom: 12px;
    box-shadow: 0 4px 8px 0 rgba(28,31,33,.1);
    .top {
      max-width: 1200px;
      margin: auto; 
      .course-top {
        clear: both;
        border-bottom: 1px solid rgba(28,31,33,.2);
        .top-header {
          margin-top: 20px;
          display: inline-block;
        }
        .course-top-search {
          position: relative;
          float: right;
          width: 520px;
          margin: 8px 0;
          .search-area {
            float: right;
            padding-right: 40px;
            margin: 12px 0;
            height: 36px;
            line-height: 36px;
            background: #f3f5f6;
            border-radius: 8px;
            border: 0;
            position: relative;
            .search-input {
              padding: 0 16px;
              color: #9199a1;
              height: 36px;
              line-height: 36px;
              font-size: 14px;
              width: 100%;
              float: left;
              border: 0;
              background-color: transparent;
              box-sizing: border-box;
            }
          }
          .showhide-search {
            width: 24px;
            height: 24px;
            font-size: 24px;
            color: #9199a1;
            text-align: center;
            position: absolute;
            display: inline-block;
            right: 16px;
            bottom: 24px;
            cursor: pointer;
            .icon-search {
              float: left;
            }
          }
        }
      }
    }
  } 
  .course-content {
    float: none;
    width: 100%;
    box-shadow: none;
  }
  .course-nav-row {
    position: relative;
    padding: 16px 0 5px;
    border-bottom: 1px solid #edf1f2;
    .hd {
      width: 52px;
      height: 20px;
      line-height: 30px;
      font-weight: 700;
      font-size: 14px;
      color: #07111b;
      text-align: left;
    }
    .bd {
      margin-left: 50px;
    }
  }
  .course-nav-item {
    display: inline-block;
    margin: 0 4px;
    .active {
      display: block;
      line-height: 14px;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 14px;
      color: #000;
    }
    a:active, a:hover {
      color: #ec1500;
    }
  }
  .course-nav-item.on .active {
    background: rgba(242,13,13,.06);
    border-radius: 6px;
    font-weight: 700;
    color: #f20d0d;
  }
  .course-skills-box {
    position: relative;
    z-index: 1;
  }
  .course-nav-skills {
    max-height: 132px;
    .bd {
      max-height: 132px;
      overflow: hidden;
    }
  }
  .border_bottom_none {
    border-bottom: none !important;
  }
  .container {
    width: 1152px;
    margin: 0 auto;
  }
  .course-tool-bar {
    position: relative;
    padding-top: 26px;
    padding-bottom: 16px;
    overflow: hidden;
    height: 14px !important;
    margin-top: -1px;
    padding-right: 15px;
    font-size: 12px;
    .tool-right {
      margin-top: -5px;
      color: #787d82;
    }
    .tool-item {
      display: inline-block;
      line-height: 20px;
      margin: 0 8px;
      vertical-align: middle;
    }
    .pager-num {
      float: left;
      margin-top: 2px;
      margin-right: 5px;
    }
    .tool-right b {
      font-weight: 400;
    }
    .pager-cur {
      color: #f01400;
    }
    .pager-action.disabled {
      border-color: #c8cdd2;
      opacity: .6;
      cursor: default;
    }
    .pager-action {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      border-radius: 10px;
      margin-left: 5px;
      width: 18px;
      height: 18px;
      background-color: #d9dde1;
      background-repeat: no-repeat;
      font-size: 14px;
      line-height: 22px;
      text-align: center;
      i {
        float: left;
        margin-left: 2px;
        margin-top: 2px;
      }
    }
  }
  .moco-change-smalle-btn.active {
    color: #FFFFFF;
    background: #9199a1;
    cursor: default;
  }
  .moco-change-smalle-btn {
    margin-right: 12px;
    background: #f3f5f7;
  }
  .moco-change-smalle-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #545c63;
    line-height: 16px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
  }
  .moco-change-smalle-btn:hover {
    color: #545c63;
    background: rgba(145,153,161,0.2);
  }
  .course-list {
    padding: 10px 0 20px;
  }
  .moco-course-list {
    margin: 0 0 0 -18px;
    font-family: "PingFang SC",Helvetica,"Helvetica Neue","微软雅黑",Tahoma,Arial,sans-serif;
  }
  .course-card-container {
    float: left;
    margin: 0 0 18px 18px;
    height: 256px;
    z-index: 0;
    width: 216px;
    position: relative;
    transition: .3s all linear;
    .course-card-top {
      width: 216px;
      height: 120px;
      position: relative;
      border-radius: 8px;
      transition: all .3s;
      .course-banner {
        width: 100%;
        height: 100%;
        background-color: #f3f5f7;
        border-radius: 8px;
      }
      .course-label {
        position: absolute;
        bottom: 6px;
        left: 8px;
        font-size: 12px;
        color: #fff;
        line-height: 16px;
        label {
          display: inline-block;
          background: rgba(7,17,27,.4);
          border-radius: 12px;
          padding: 4px 8px;
          margin-right: 4px;
          margin-bottom: 2px;
          margin-right: 0;
          font-weight: 200;
        }
      }
    }
    .course-card-content {
      padding: 12px 8px;
      .course-card-name {
        font-size: 16px;
        color: #07111b;
        line-height: 24px;
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        max-height: 46px;
        transition: all .3s;
      }
      .course-card-info {
        margin-top: 2px;
        font-size: 12px;
        color: #93999f;
        line-height: 24px;
        font-weight: 400;
        span {
          display: inline-block;
          margin-right: 12px;
        }
      }
      .course-card-desc {
        font-size: 12px;
        font-weight: 300;
        color: #93999f;
        line-height: 22px;
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 44px;
      }
    }
  }
  .course-card-container:hover .course-card-name {
    color: #f01414 !important;
  }
  .page {
    margin: 25px 0 auto;
    overflow: hidden;
    clear: both;
    text-align: center;
    span, .page-disabled {
      display: inline-block;
      padding: 0 4px;
      min-width: 24px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #c8cdd2;
      text-align: center;
    }
    a.text-page-tag.active {
      background: #4d555d;
      color: #fff;
    }
    a {
      display: inline-block;
      margin: 0 8px;
      padding: 0 4px;
      min-width: 24px;
      line-height: 32px;
      font-size: 14px;
      color: #4d555d;
      text-align: center;
      border-radius: 16px;
      transition: border-color .2s;
    }
  }
  #footer {
    background: #1c1f21;
    border-top: 1px solid #e2e4e6;
    font-size: 12px;
    color: #787d82;
    height: 45px;
    padding: 27px 0;
    min-width: 620px;
    .waper {
      width: auto;
      max-width: 1200px;
    }
    .followus {
      margin-right: 34px;
      padding-left: 30px;
    }
    .footer_intro {
      padding-left: 40px;
    }
    .footer_link {
      margin-bottom: 4px;
      line-height: 1.8;
      li {
        margin-right: 30px;
        text-align: center;
        float: left;
      }
    }
    p {
      line-height: 1.7;
    }
  }
  .waper {
    width: 1200px;
    margin: 0 auto;
  }
  .followus .followus-weixin {
    background-position: 0 -279px;
  }
  .followus .followus-weibo {
    background-position: 0 -321px;
  }
  .followus .followus-qzone {
    background-position: 0 -363px;
  }
  .followus a {
    float: left;
    position: relative;
    width: 32px;
    height: 32px;
    background-image: url(../../../static/img/footer-sprite.png?t=2);
    background-repeat: no-repeat;
    margin: 3px 6px 0;
    opacity: .5;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 2;
  }
  .footer_link ul {
    overflow: hidden;
    margin-top: -1px;
  }
  .footer_link a:active, .footer_link a:link, .footer_link a:visited {
    color: #c8cdd2;
  }
  .footer_link a:hover {
    color: #fff;
}
</style>


